import React from 'react'
import { View, Text, ScrollView, Image } from 'react-native'
import BasePage from '../../common/basePage'
import { Calendar, Button } from '../../components'
import { NavigationScreenOptions } from 'react-navigation'
// export interface PlanViewProps {

// }
export default class PlanViewPage extends BasePage {
  public static navigationOptions: NavigationScreenOptions = {
    title: '打卡',
    headerStyle: {
      backgroundColor: '#7fa2ff',
      borderBottomWidth: 0,
      shadowOpacity: 0,
      elevation: 0
    },
    headerTitleStyle: {
      color: '#fff'
    }
  }

  public render (): JSX.Element {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView style={{
          backgroundColor: '#eee'
        }}>
          <View style={{
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#fff',
            marginBottom: 20,
            height: 100
          }}>
            <Text>还有X天任务就要完成了</Text>
            <Text>每天坚持打卡，计划结束后可领取奖励金哦</Text>
          </View>
          <View style={{
            backgroundColor: '#fff',
            padding: 10,
            alignItems: 'center'
          }}>
            <Calendar />
            <Text>计划25天完成，已坚持14天</Text>
            <Button>打卡</Button>
          </View>
          <Text>我的日记</Text>
          <View style={{
            backgroundColor: '#fff',
            margin: 20,
            marginBottom: 0,
            padding: 15
          }}>
            <Text>完成了一张夜晚的场景， 哈哈哈哈</Text>
            <Image source={{ uri: 'https://img.ui.cn/data/file/2/2/1/2631122.png?imageMogr2/auto-orient/format/jpg/strip/thumbnail/!1200%3E/quality/90/' }} style={{ height: 200 }} />
            <Text style={{ textAlign: 'right' }}>昨天20：08</Text>
          </View>
          <View style={{
            backgroundColor: '#fff',
            margin: 20,
            padding: 15
          }}>
            <Text>完成了一张夜晚的场景， 哈哈哈哈</Text>
            <Image source={{ uri: 'https://img.ui.cn/data/file/2/2/1/2631122.png?imageMogr2/auto-orient/format/jpg/strip/thumbnail/!1200%3E/quality/90/' }} style={{ height: 200 }} />
            <Text style={{ textAlign: 'right' }}>昨天20：08</Text>
          </View>
        </ScrollView>
      </View>
    )
  }
}
